﻿@page "/testcodes"
@attribute [TabItemOption(Text = "条码扫描", Icon = "fa fa-barcode")]
@using ZXingBlazor.Components
@using System.Text.Json
@using static BootstrapBlazor.Components.UploadToBase64

<div>
    <div style="height:250px;overflow: scroll ">
        <BarcodeReader ScanResult="ScanResult2"
                       Decodeonce="false"
                       UseBuiltinDiv="false"
                       @ref="barcodeReaderCustom" />

        <div @ref="barcodeReaderCustom.Element">
            <div style="width: 75vw; max-width: 260px;">
                <div>
                    <video id="video" playsinline autoplay style="width:70vw;max-width:250px;height:200px;border: 1px solid red"></video>
                </div>
                <div data-action="sourceSelectPanel" style="display:none">
                    <select data-action="sourceSelect" style="max-width:100%" class="form-select form-control">
                    </select>
                </div>
                <button class="btn btn-outline-success p-2 m-1 w-25" data-action="startButton">扫描</button>
                <button class="btn btn-outline-success p-2 m-1 w-25" data-action="resetButton">重置</button>
                <button type="button" class="btn btn-outline-success p-2 m-1 w-25" data-action="closeButton">关闭</button>
            </div>
        </div>
    </div>
    <div style="height: 50px; overflow: scroll ">
        <pre>@BarCodesCustom</pre>
    </div>
    <div style="height: 400px; overflow: scroll ">
        <BarCodes @ref="barCodes" OnDecodeFromImage="DecodeResult" QRCodeWidth="200" />

        <div class="row">
            <div class="col-12">
                <BootstrapInputGroup>
                    <BootstrapInput @bind-Value="BarCode" ShowLabel="true" PlaceHolder="条码" OnEnterAsync="_=>OnAPI()" OnEscAsync="_=> OnEsc()" />
                    <Button Text="查找" OnClick="OnAPI" />
                    <Button OnClick="OnScan" Text="扫码" />
                    <UploadToBase64 CssClass="btn btn-primary" OnChanged="OnChanged" UploadButtonText="拍照" Capture />
                </BootstrapInputGroup>
            </div>
        </div>

        @if (prods != null)
        {
            <ListView TItem="Prod" Items="@prods">
                <HeaderTemplate>
                    <div>产品列表</div>
                </HeaderTemplate>
                <BodyTemplate>
                    <Card>
                        <BodyTemplate>
                            <img src="@context.Image" style="width:130px;height:120px;" />
                            <div style="width: 130px; height: 40px;overflow:hidden;">@context.ProductName</div>
                            <h5>@($"{context.UnitPrice:n2}")</h5>
                        </BodyTemplate>
                    </Card>
                </BodyTemplate>
                <FooterTemplate>
                    <div class="text-end">
                        Copyright Densen informatica
                    </div>
                </FooterTemplate>
            </ListView>

        }
    </div>

</div> 